<style lang="less">
@import './style.less';
</style>

<template>
	<div class="typing-training">
		<el-header>
			<el-row>
				<el-col :span="14.4"></el-col>
			</el-row>
			<el-menu
				:default-active="tab_active"
				@select="handleSelect"
				active-text-color="#f8c410"
				background-color="#f26522"
				class="el-menu-demo"
				mode="horizontal"
				text-color="#fff"
			>
				<el-menu-item index="number" v-if="operationType">数字录入</el-menu-item>
				<el-menu-item index="citation" v-if="operationType">传票翻打(随机模式)</el-menu-item>
				<el-menu-item index="citation_fixed" v-if="operationType">传票翻打(固定模式)</el-menu-item>
				<!-- <el-menu-item index="exam">考试</el-menu-item> -->
				<el-menu-item index="examineGrade" v-if="operationType">查看成绩</el-menu-item>
				<div @click="backUrl()" class="typing-training-btn">
					<i class="el-icon-back"></i>返回学习中心
				</div>
			</el-menu>
		</el-header>
		<div class="typing-training-box">
			<citation-test @handleSelect="handleSelect" ref="ref" v-if="tab_active=='citation'"></citation-test>
			<citation-fixed @handleSelect="handleSelect" ref="ref" v-else-if="tab_active=='citation_fixed'"></citation-fixed>
			<examine-grade v-else-if="tab_active=='examineGrade'"></examine-grade>
			<number-test @handleSelect="handleSelect" v-else></number-test>
		</div>
	</div>
</template>

<script>
/**
 * 学员主页
 */
// import { mapGetters, mapActions, mapMutations } from "vuex";
import numberTest from './tabs/numberTest'
import citationTest from './tabs/citationTest'
import examineGrade from './tabs/examineGrade'
import citationFixed from './tabs/citationFixed'
export default {
  name: 'typingTraining',
  components: {
    'number-test': numberTest,
    'citation-test': citationTest,
    'examine-grade': examineGrade,
    'citation-fixed': citationFixed
  },
  data() {
    return {
      /** initData */
      tab_active: this.$route.query.tabName,
      operationType: this.$route.query.operationType ? false : true
    }
  },
  mounted() {},
  watch: {
    $route(newVal, oldVal) {
      this.tab_active = newVal.query.tabName
    }
  },
  computed: {},
  methods: {
    handleSelect(key, style) {
      if (
        this.tab_active == 'citation_fixed' ||
        this.tab_active == 'citation'
      ) {
        this.$refs.ref.operation_state = true
      }
      this.tab_active = key
      let type = style ? style : ''
      this.$router.push({
        path: '/typingTraining',
        query: { tabName: key, type: type }
      })
    },
    backUrl() {
      this.$router.replace({
        name: 'traineeHome',
        query: { tabName: 'learning' }
      })
    }
  }
}
</script>
